<template>


  <a-card :bordered="false">
    <div style="width: 75%;float: right">
      <a-form ref="menuForm" class="form"  :form="menuForm">
            <a-form-item label="菜单名称" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
              <a-input
                placeholder="请输入菜单名称"
                maxlength="50"
                v-model="menuJson.menuName"
                autocomplete="off"
                />
            </a-form-item>
        <a-form-item label="path" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
          <a-input
            placeholder="请输入path"
            maxlength="50"
            :disabled="menuJson.id"
            v-model="menuJson.path"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item label="name" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
          <a-input
            placeholder="请输入name"
            maxlength="50"
            :disabled="menuJson.id"
            v-model="menuJson.name"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item label="图标" :labelCol=" { span: 3 }" :wrapperCol=" { span: 18 }">
          <a-input
            placeholder="请输入图标"
            maxlength="50"
            v-model="menuJson.icon"
            autocomplete="off"
          />
        </a-form-item>

        <a-form-item class="text-align-center">
          <a-button type="danger" class="margin-right-20" @click="handleDelete(menuJson.id)">删除</a-button>
          <a-button class="margin-right-20" @click="saveFormData(1)">保存编辑</a-button>
          <a-button type="primary" @click="saveFormData(2)">添加子菜单</a-button>
        </a-form-item>
      </a-form>


    </div>

    <a-menu

      style="width: 20%;float: left"
      :defaultSelectedKeys="['1']"
      :openKeys.sync="openKeys"
      mode="inline"
      :inlineCollapsed="false"
    >

      <a-sub-menu :key="index"  v-for="(item,index) in menuListData" v-if="item.parentId==0">
        <span slot="title" @click="handleClick(item)"  v-if="item.parentId==0"><a-icon :type="item.icon" /><span>{{item.menuName}}</span></span>
        <a-menu-item :key="inx" @click="handleClick(items)"  v-for="(items,inx) in menuListData" v-if="items.parentId==item.id">{{items.menuName}}</a-menu-item>
      </a-sub-menu>
     <!-- <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="appstore" /><span>土地资源</span></span>
        <a-menu-item key="3">资源管理</a-menu-item>
        <a-menu-item key="4">新建资源</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub3">
        <span slot="title"><a-icon type="setting" /><span>政策管理</span></span>
        <a-menu-item key="5">政策列表</a-menu-item>
        <a-menu-item key="6">新建政策</a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <span slot="title"><a-icon type="setting" /><span>GIS地图</span></span>
      </a-sub-menu>
      <a-sub-menu key="sub5">
        <span slot="title"><a-icon type="setting" /><span>系统管理</span></span>
        <a-menu-item key="7">字典管理</a-menu-item>
        <a-menu-item key="8">日志管理</a-menu-item>
        <a-menu-item key="9">权限管理</a-menu-item>
        <a-menu-item key="10">用户管理</a-menu-item>
        <a-menu-item key="11">菜单管理</a-menu-item>
      </a-sub-menu>-->

    </a-menu>



  </a-card>

</template>

<script>

  import ATextarea from "ant-design-vue/es/input/TextArea"
  import AInput from "ant-design-vue/es/input/Input"

  import {getRoleList, getServiceList} from '@/api/manage'

  import indexedDB from '../../db/db'
  import {menuList} from "../../db/menuList"

  export default {
    name: "menuSList",
    components: {
      AInput,
      ATextarea,


    },
    data() {
      return {
        menuListData: [],


        current: ['mail'],
        openKeys: ['sub1'],
        detailBool:false,
        visible: false,
        searchText:"",
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 12},
        },
        dictionaryFormData:{},
        menuForm:this.$form.createForm(this),

        menuJson:{
          menuName:"",
          parentId:0,
          path:"",
          name:"",
          icon:"",
          sort:"0",
        },
        // 高级搜索 展开/关闭
        advanced: true,

        //数据库
        tableData: [],
        parentIds:null,
      }
    },
    created() {

    },
    watch: {
      openKeys (val) {
        console.log('openKeys', val)
      },
    },
    mounted() {
      indexedDB.initDB()
      indexedDB.batInit('menuList', menuList);// 初始化数据
      this.getlandMenuList()
    },
    methods: {
      handleClick (e) {
        // console.log('click', e)
        for(let i in e){
          this.menuJson[i] = e[i];
        }
        this.parentIds = e.id;
      },

      getlandMenuList() {
        let that = this
        indexedDB.handleDataByCursor('menuList', '','').then(res => {
          console.log(res)
          if (res.length > 0) {
            that.menuListData = res

          }
        })
      },


      handleEdit(record) {
        this.visible = true
        this.dictionaryFormData = Object.assign({}, record);
      },

      handleDelete(record) {
        let _this = this;
        if(!record){this.$message.info("请选择要删除的菜单！");return;}
        this.$confirm({
          title:"提示",
          content:"确定删除吗？",
          onOk(){
            indexedDB.delete({name:"menuList"},record).then((res)=>{
              if(res==true){
                _this.$message.error("删除成功！");
                _this.getlandMenuList();
              }else{
                _this.$message.error("删除失败！");
              }
            })
          }
        })

      },





      saveFormData(code){
        if(code==2){
          delete  this.menuJson.id;
          this.menuJson.parentId = this.parentIds;
        }
        let _this = this
        indexedDB.update({name:"menuList"},_this.menuJson).then((res)=>{
          console.log(res);
          if(res==true){
            _this.$message.info("保存成功");
            _this.menuJson = {
                menuName:"",
                parentId:0,
                path:"",
                name:"",
                icon:"",
                sort:"0",
            };
            _this.getlandMenuList();
          }else{
            _this.$message.error("保存失败！");
          }
        });


      },



    },

  }
</script>